<template>
  <div>
    <h1>翻译</h1>
    <el-button @click="locale='zh'">中文</el-button>
    <el-button @click="locale='en'">En</el-button>
    <h3>{{ t('sayHi') }}</h3>
    <h3>{{ t('zaoan') }}</h3>
  </div>
</template>

<script>
export default {
  data() {
    return {
    // 1,记录当前语言设定
      locale: 'zh',
      // 2,准备翻译信息
      message: {
        zh: {
          sayHi: '你好',
          zaoan: '早安'
        },
        en: {
          sayHi: 'hello',
          zaoan: 'morning'
        }
      }
    }
  },
  methods: {
    t(val) {
      // 定义字典
      const zidain = this.message[this.locale]
      return zidain[val]
    }
  }
}
</script>

<style>

</style>
